import { useState, useEffect } from 'react'
import { resourcePath } from '../../../../../../../utils/resource';
import { Button, Table } from 'antd';
import useBusinessMap from '../../../../../../common/BusinessMap/useBusinessMap';
import { navByWkt } from '../../../../../../../utils/helper/mapHelper';
import JcyjApi from '../../../../../../../utils/apis/JcyjApi';
import BlockTitle from '../../../../../../framework/BlockTitle';
import BlockBody from '../../../../../../framework/BlockBody';
export default function Yq(props) {
    const [datas, setDatas] = useState();

    const [params, setParams] = useState({
        pageSize: 5,
        pageNum: 1,
        jcdlx: '气象'
    });
    const [total, setTotal] = useState();

    useEffect(() => {
        JcyjApi.jcdList(params).then(resp => {
            setDatas(resp.rows)
            setTotal(resp?.total);
        });
    }, [params])

    const map = useBusinessMap();

    const [showScroll, setShowScroll] = useState(false);
    const [detailItem, setDetailItem] = useState(null);

    return <div>
        <BlockTitle>
            雨情监测（<span>{total}</span>）
        </BlockTitle>
        <BlockBody>
            <Table style={{
                // height: 250
            }} columns={[{
                title: '站点名',
                dataIndex: 'zdm',
                ellipsis: true
            }, {
                width: 70,
                align: "center",
                render: (text, record) => {
                    return <Button type="link" size="small" onClick={e => {
                        if (record.geom) {
                            navByWkt(record.geom, map)
                        }
                        props.onDetail?.(record);
                        props.setShowScroll(false);
                        props.setDetailItem(record);
                        // props.setScrollKey(scrollKey + 1); // 更新 scrollKey 值，强制重新渲染滚动元素
                        setTimeout(() => {
                            props.setShowScroll(true);
                        }, 0);
                    }}>详情</Button>
                }
            }]} dataSource={datas}
                size="small"
                bordered
                pagination={{
                    current: params.pageNum,
                    pageSize: params.pageSize,
                    total,
                    simple: true,
                    onChange: (page) => {
                        setParams(params => {
                            return {
                                ...params,
                                pageNum: page
                            }
                        })
                    }
                }}
            />
        </BlockBody>
    </div>;
}